<template>
  <a-form :label-col="{span: 6}" :wrapper-col="{span: 16}">
    <a-form-item label="用户名称" v-bind="validateInfos.name">
      <a-input v-model:value="modelRef.name" v-focus />
    </a-form-item>
    <a-form-item label="登陆账号" v-bind="validateInfos.account">
      <a-input v-model:value="modelRef.account" />
    </a-form-item>
    <a-form-item label="登陆密码" v-bind="validateInfos.password" v-if="type=='insert'">
      <a-input v-model:value="modelRef.password" />
    </a-form-item>
    <a-form-item label="所属部门" v-bind="validateInfos.deptCode">
      <a-tree-select v-model:value="modelRef.deptCode" :field-names="{children: 'children', label: 'name',value: 'code' }" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                     tree-default-expand-all :tree-data="treeData">
      </a-tree-select>
    </a-form-item>
    <a-form-item label="所属角色" v-bind="validateInfos.roleCodes">
      <a-select v-model:value="modelRef.roleCodes" mode="multiple" :field-names="{ label: 'name', value: 'code', options: 'children' }" :options="roleData"></a-select>
    </a-form-item>
    <a-form-item label="所属岗位" v-bind="validateInfos.jobCodes">
      <a-select v-model:value="modelRef.jobCodes" mode="multiple" :field-names="{ label: 'name', value: 'code', options: 'children' }" :options="jobData"></a-select>
    </a-form-item>
    <a-form-item label="性别" v-bind="validateInfos.sex">
      <a-radio-group v-model:value="modelRef.sex">
        <a-radio value="M">
          <icon-font type="icon-man" />男</a-radio>
        <a-radio value="W">
          <icon-font type="icon-woman" />女</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="手机号">
      <a-input v-model:value="modelRef.phone" />
    </a-form-item>

    <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
      <a-space>
        <a-button @click="resetFields">重置</a-button>
        <a-button type="primary" @click.prevent="onSubmit">保存</a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>
<script>
import { all as jobAll } from '@/api/sysJobApi.ts'
import { all as roleAll } from '@/api/sysRoleApi.ts'
import { tree } from '@/api/sysDeptApi.ts'
import { insert, update } from '@/api/sysUserApi.ts'
import { defineComponent, reactive, toRaw, toRefs, onMounted } from 'vue'
import { Form, message } from 'ant-design-vue'
const useForm = Form.useForm
export default defineComponent({
  props: {
    type: String,
    row: Object
  },
  setup(props, context) {
    const { type, row } = props
    const data = reactive({
      treeData: [],
      roleData: [],
      jobData: []
    })

    const modelRef = reactive({
      name: row?.name,
      sex: row?.sex || 'W',
      deptCode: row?.deptCode,
      jobCodes: row?.jobCodeStr?.split(',') || [],
      roleCodes: row?.roleCodeStr?.split(',') || [],
      phone: row?.phone,
      account: row?.account,
      password: row?.password
    })
    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: '用户名称必填项'
        }
      ],
      sex: [
        {
          required: true,
          message: '用户性别必填项'
        }
      ],
      deptCode: [
        {
          required: true,
          message: '用户部门必填项'
        }
      ],
      roleCodes: [
        {
          required: true,
          message: '用户角色必填项'
        }
      ],
      jobCodes: [
        {
          required: true,
          message: '用户岗位必填项'
        }
      ],
      account: [
        {
          required: true,
          message: '登陆账号必填项'
        }
      ],
      password: [
        {
          required: true,
          message: '登陆密码必填项'
        }
      ]
    })
    const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef)

    const onSubmit = () => {
      validate()
        .then(() => {
          if (type == 'insert') {
            insertData()
          } else if (type == 'update') {
            updateData()
          }
        })
        .catch(err => {
          console.log('error', err)
        })
    }

    const insertData = () => {
      let form = toRaw(modelRef)
      insert(form).then(resd => {
        message.success('创建成功')
        context.emit('success', resd)
      })
    }

    const updateData = () => {
      let form = toRaw(modelRef)
      let params = {
        id: row?.id,
        code: row?.code,
        name: form?.name,
        sex: form?.sex || 'W',
        deptCode: form?.deptCode,
        phone: form?.phone,
        account: form?.account,
        jobCodes: form?.jobCodes,
        roleCodes: form?.roleCodes
      }
      update(params).then(resd => {
        message.success('更新成功')
        context.emit('success', resd)
      })
    }

    // 初始化部门树数据
    const initTreeData = () => {
      let params = {}
      tree(params).then(resd => {
        data.treeData = resd
      })
    }

    // 初始化岗位数据
    const initJobData = () => {
      jobAll().then(resd => {
        data.jobData = resd
      })
    }
    // 初始化角色数据
    const initRoleData = () => {
      roleAll().then(resd => {
        data.roleData = resd
      })
    }

    // 页面初始化
    onMounted(() => {
      initTreeData() // 初始化树
      initJobData() // 初始化岗位数据
      initRoleData() // 初始化角色数据
    })

    return {
      ...toRefs(data),
      validateInfos,
      resetFields,
      modelRef,
      onSubmit
    }
  }
})
</script>